 <template>
   <div class="app-container flex-column" style="justify-content: center;">
     <div style="flex: 1;overflow: hidden; padding: 1px; ">
       <video-js class="video-js vjs-default-skin" ref="videoPlayer" :options="playerOptions"
         style="width: 100%;height: 100%;"></video-js>
     </div>
   </div>
 </template>

 <script>
   import videojs from 'video.js'
   import 'video.js/dist/video-js.css'

   export default {
     name: 'PlayVideo',
     components: {
       videojs
     },
     data() {
       return {
         src: "",
         baseUrl: process.env.VUE_APP_BASE_API,
         player: null,
         playerOptions: {
           autoplay: false,
           controls: true,
           responsive: true,
           fluid: true,
           sources: [{
             type: "video/mp4",
             src: ""
           }],
           poster: ""
         }
       };
     },
     computed: {},
     created() {


       const src = this.$route.params && this.$route.params.src;
       const zltm = this.$route.params && this.$route.params.zltm;
       this.$nextTick(() => {
         let visitedViews = this.$store.state.tagsView.visitedViews;
         visitedViews.some(v => {
           if (v.path == this.$route.path) {
             v.title = zltm;
           }
         })

       });
       if ((src.indexOf(this.baseUrl) === -1) & src.indexOf('http') === -1) {
         this.src = this.baseUrl + 'printtemp/' + src;
       } else {
         this.src = src;
       }
       console.log(this.src);
       this.playerOptions = {
         autoplay: false,
         controls: true,
         responsive: true,
         fluid: false,
         sources: [{
           type: "video/mp4",
           src: this.src
         }],
         poster: ""
       }
       this.$nextTick(() => {
         this.player = videojs(this.$refs.videoPlayer, this.playerOptions, () => {
           console.log('Player is ready.');
         });
       });
     },
     mounted() {

     },
     beforeDestroy() {
       if (this.player) {
         this.player.dispose();
       }
     }
   };
 </script>

 <style scoped>

 </style>
